<template>
  <div>
    <Header />

    <div class="nav-outer">
      <div class="nav-1200 area1190">
        <span>首页</span> > <span>商城首页</span> > <span>个人中心</span> >
        <div class="nav-right">
          <span>售后政策</span>
          <i class="center-line"></i>
          <span @click="toConsult">咨询客服</span>
        </div>
      </div>
    </div>

    <!-- 内容层 -->
    <div class="middle-box">
        <div class="content-box">
            <div class="flex jc-sb">
                <div class="nav-left">
                    <user-nav></user-nav>
                </div>
                <div class="flex-1 right-box">
                  <router-view></router-view>
                </div>
            </div>
        </div>
    </div>
    <Footer />
  </div>
</template>

<script>
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
import UserNav from "@/components/UserNav.vue";
export default {
    name: "CarCenter",
    components: {
        Header,
        Footer,
        UserNav
    },
    methods:{
        toConsult() {
            window.open("https://tb.53kf.com/code/client/76df7a37aaeedb720ea6c829254a932a0/1", "name", "height=600, width=800, top=0, left=4, toolbar=no, menubar=no, scrollbars=no, resizable=yes,location=no, status=no");
        },
    }
}
</script>

<style lang="scss" scoped>
.middle-box {
    margin: 20px 0;
    .nav-left {
        width: 260px;
        margin-right: 20px;
    }
    .right-box {
        background: #fff;
    }
}

/*手机端*/
@media (min-width: 320px) and (max-width: 800px) {
  .nav-outer {
    border: 0;
    height: 30px;
    line-height: 30px;
  }
  .nav-1200 {
    width: 100%;
    line-height: 30px;
    .nav-right {
      display: none;
    }
  }
  .nav-left {
    display: none;
  }

  .content-box {
    width: 100%;
  }
}
</style>